<template>
  <div class="orders">
    <filter-cmp @getFilter="getFilter" />
    <div class="order-list">
      <div class="order-top">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first" />
          <el-tab-pane label="未发货" name="pre_delivery" />
          <el-tab-pane label="未领取" name="pre_get" />
          <el-tab-pane label="已完成" name="have_complete" />
        </el-tabs>
      </div>
      <div class="order-bottom">
        <el-row class="bg">
          <el-col :span="6">
            <div>商品信息</div>
          </el-col>
          <el-col :span="3">
            <div>积分</div>
          </el-col>
          <el-col :span="4">
            <div>配送方式</div>
          </el-col>
          <el-col :span="2">
            <div>下单人</div>
          </el-col>
          <el-col :span="4">
            <div>发货信息</div>
          </el-col>
          <el-col :span="2">
            <div>状态</div>
          </el-col>
          <el-col :span="3">
            <div>操作</div>
          </el-col>
        </el-row>
        <div v-if="list.length" :style="{height: height + 'px'}" style="overflow-y: auto;">
          <div v-for="(item, index) of list" :key="index">
            <el-row class="bg bgs">
              <el-col :span="8">
                <div style="white-space: nowrap">订单号: {{ item.number }}</div>
              </el-col>
              <el-col :span="3">
                <div style="white-space: nowrap">下单时间: {{ item.created_at }}</div>
              </el-col>
            </el-row>
            <el-row class="h-150">
              <el-col :span="6">
                <div class="d-flex">
                  <el-avatar shape="square" :size="70" :src="item.goods_image" />
                  <div class="ml">
                    <p>化妆水</p>
                    <p>单价：{{ item.goods_score }}积分</p>
                  </div>
                  <p class="ml">X1</p>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="lh-150 txt-center">{{ item.score }}</div>
              </el-col>
              <el-col :span="4">
                <div
                  class="lh-150 txt-center"
                >{{ item.delivery_type === 1 ? '自提' : item.delivery_type === 2 ? '快递配送' : item.delivery_type === 3 ? '自提+快递配送' : '' }}</div>
              </el-col>
              <el-col :span="3">
                <div class="txt-center d-flex">
                  <div>
                    <div class="d-flex">
                      <el-avatar shape="square" :size="40" :src="item.user_avatar" />
                      <p class="ml">{{ item.receiver_name || item.user_nickname }}</p>
                    </div>
                    <p>{{item.user_account }}</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="txt-center d-flex">
                  <div>
                    <p>{{ item.receiver_name }}/{{ item.receiver_phone }}</p>
                    <p>{{ item.receiver_address }}</p>
                    <p>{{ item.receiver_email }}</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="txt-center d-flex">
                  <div v-if="item.delivery_type == 1 && item.status == 1">未领取</div>
                  <div v-if="item.delivery_type == 1 && item.status == 2">已完成</div>
                  <div v-if="item.delivery_type == 2 && item.status == 1">未发货</div>
                  <div v-if="item.delivery_type == 2 && item.status == 2 ">已完成</div>
                </div>
              </el-col>
              <el-col :span="3" fixed="right">
                <div class="lh-150 txt-center" style="white-space: nowrap">
                  <span class="col-green" @click="orderDetailClick(item)">订单详情</span>
                  <span
                    class="col-blue"
                    v-show="item.delivery_type == 2 && item.status == 1"
                    @click="deliverClick(item.id)"
                  >发货</span>
                  <span
                    class="col-blue"
                    v-show="item.delivery_type == 1 && item.status == 1"
                    @click="receiveClick(item.id)"
                  >领取</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <Dialog ref="dialog" title="发货" class="dialog" @closeDialog="handleClose">
      <el-form ref="form" label-width="80px">
        <el-form-item label="物流类型:">
          <el-select v-model="value" placeholder="请选择" style="width: 300px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号:">
          <el-input v-model="shipNum" size="meduim" style="width: 300px" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="shipDesc" size="meduim" type="textarea" style="width: 300px" />
        </el-form-item>
      </el-form>
    </Dialog>
    <Pagination
      class="pagination"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
    <order-detail ref="orderDetail" :order-detail="orderInfo" />
  </div>
</template>
<script>
import FilterCmp from "@/views/integral/filter-cmp";
import Dialog from "@/common/dialog";
import OrderDetail from "@/views/integral/order-detail";
import { getIntegralOrderList, integralShip } from "@/api/http/integral";
import Resize from "@/common/mixins/resize";
import Pagination from "@/common/pagination";
const ERR_OK = 200;
export default {
  components: {
    FilterCmp,
    Dialog,
    OrderDetail,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      status: "",
      shipNum: "",
      shipDesc: "",
      editId: "",
      ruleForm: {
        number: "",
        user_nickname: "",
        receiver_name: "",
        receiver_phone: "",
        start_at: "",
        end_at: "",
        delivery_type:""
      },
      activeName: "first",
      options: [
        {
          value: "顺丰快递",
          label: "顺丰快递"
        },
        {
          value: "圆通快递",
          label: "圆通快递"
        },
        {
          value: "申通快递",
          label: "申通快递"
        },
        {
          value: "中通快递",
          label: "中通快递"
        },
        {
          value: "百世快递",
          label: "百世快递"
        },
        {
          value: "韵达快递",
          label: "韵达快递"
        },
        {
          value: "天天快递",
          label: "天天快递"
        },
        {
          value: "汇通快递",
          label: "汇通快递"
        },
        {
          value: "邮政ems",
          label: "邮政ems"
        }
      ],
      value: "",
      list: [],
      total: 0,
      orderInfo: {},
      defaultHeight: 340,
      currentPage: 1
    };
  },
  watch: {
    ruleForm: {
      handler: function(val) {
        this._getIntegralOrderList();
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this._getIntegralOrderList();
  },
  methods: {
    // 领取
    receiveClick(id) {
      integralShip({
        id: id
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("领取成功");
          this._getIntegralOrderList();
        }
      });
    },
    // 确定发货
    handleClose() {
      this.$refs.dialog.show();
      if (!this.value) {
        this.$message("请选择物流类型");
        return;
      }
      if (!this.shipNum) {
        this.$message("请填写物流单号");
        return;
      }
      integralShip({
        id: this.editId,
        express_company: this.value,
        express_no: this.shipNum,
        description: this.shipDesc
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("发货成功");
          this.$refs.dialog.cancel();
          this.value = "";
          this.shipNum = "";
          this.shipDesc = "";
          this._getIntegralOrderList();
        }
      });
    },
    // 获取筛选栏的数据
    getFilter(e) {
      this.ruleForm = e;
    },
    handleNextPage(page) {
      this.currentPage = page;
      this._getIntegralOrderList();
    },
    deliverClick(id) {
      this.editId = id;
      this.$refs.dialog.show();
    },
    handleClick() {
      if (this.activeName == "first") {
        this.status = "";
      } else {
        this.status = this.activeName;
      }
      this._getIntegralOrderList();
    },
    orderDetailClick(item) {
      this.orderInfo = item;
      this.$refs.orderDetail.show();
    },
    _getIntegralOrderList() {
      var params = {
        status: this.status,
        number: this.ruleForm.number,
        user_nickname: this.ruleForm.user_nickname,
        receiver_name: this.ruleForm.receiver_name,
        receiver_phone: this.ruleForm.receiver_phone,
        start_at: this.ruleForm.start_at,
        end_at: this.ruleForm.end_at,
        page: this.currentPage,
        delivery_type:this.ruleForm.delivery_type
      };
      getIntegralOrderList(params)
        .then(res => {
          if (res.code === ERR_OK) {
            // console.log(res);
            this.list = res.data.data;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/color.scss";
@import "@/styles/el-pagination.scss";
.el-row {
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

.el-col {
  border-radius: 4px;
  height: 100%;
  & > div {
    height: 100%;
  }
}
.bg {
  background-color: #fafafa;
  line-height: 40px;
  text-align: center;
}
.d-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml {
  margin-left: 10px;
}
.h-150 {
  height: 150px;
}
.lh-150 {
  line-height: 150px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-25 {
  margin-top: 25px;
}
.mt-10 {
  margin-top: 10px;
}
.txt-center {
  text-align: center;
}
.el-tabs /deep/.el-tabs__header {
  margin-bottom: 0;
}
.dialog /deep/ .el-dialog {
  min-width: 550px;
}
.bgs {
  text-align: left;
}
</style>
